<template>
  <div class="el-date-quarter-container">
    <!-- 季 -->
    <template v-if="checkCycle.ccType===0">
      <!-- 月 -->
      <el-date-picker
        v-model="year"
        value-format="yyyy"
        type="year"
        style="width: 110px !important; margin-right: 5px"
        placeholder="请选择年"
        :clearable="false"
      />
      <el-select
        v-model="quarterValue"
        placeholder="请选择季度"
        style="width: 110px"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </template>
    <!-- 月 -->
    <template v-else>
      <el-date-picker
        v-model="dateTime"
        :clearable="false"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        popper-class="q-d"
        value-format="yyyy-MM-dd"
        @focus="handleFocus"
      />
    </template>

  </div>
</template>
<script>
export default {
  name: 'ElDateQuarter', // 季度日期选择
  props: {
    // eslint-disable-next-line vue/require-default-prop
    value: {
      type: [String, Array]
    }
  },
  data() {
    return {
      dateTime: this.value,
      checkCycle: {},
      year: this.$arraySplite(this.value, 0),
      quarterValue: this.$arraySplite(this.value, 1),
      options: [
        {
          value: '1',
          label: '一季度'
        },
        {
          value: '2',
          label: '二季度'
        },
        {
          value: '3',
          label: '三季度'
        },
        {
          value: '4',
          label: '四季度'
        }
      ]
    }
  },
  computed: {
    yearQuarterValue() {
      return `${
        this.year && this.quarterValue ? this.year + '-' : this.year || ''
      }${this.quarterValue || ''}`
    }
  },
  watch: {
    yearQuarterValue: {
      handler(value) {
        this.$emit('update:value', value)
      },
      deep: true,
      immediate: true
    },
    value: {
      handler(value) {
        if (this.checkCycle.ccType === 1) { // 月
          this.dateTime = value
        } else { // 季
          this.year = this.$arraySplite(value, 0)
          this.quarterValue = this.$arraySplite(value, 1)
        }
      },
      deep: true
    },
    dateTime: {
      handler(value) {
        this.$emit('update:value', value)
      },
      immediate: true
    }
  },
  created() {
    const { ccType, endDay, endMoon, startDay } = localStorage.getItem('checkCycle') && JSON.parse(
      localStorage.getItem('checkCycle')
    ) || {}
    this.checkCycle = {
      ccType: ccType
    }
    if (ccType === 1) { // 月
      this.checkCycle = {
        ccType: ccType,
        endDay: endDay,
        endMoon: endMoon,
        startDay: startDay,
        startMoon: '0'
      }
    }
  },
  methods: {
    handleFocus() {
      this.$nextTick(() => {
        const dom = document.querySelector('.q-d')
        const time = `月度核算周期：本月${this.checkCycle?.startDay}号至${this.checkCycle?.endMoon === '0' ? '本月' : '下月'}${this.checkCycle?.endDay}号`
        if (dom) {
          document.documentElement.style.setProperty('--date-bottom-text', `'${time}'`)
        }
      })
    },
    getYj(index) {
      return (this.value && this.value.split('-')[index]) || ''
    }
  }
}
</script>
<style lang="scss">
.q-d{
  .el-picker-panel__body {
    &::after {
      position: absolute !important;
      display: block !important;
      content: var(--date-bottom-text) !important;
      height: 20px !important;
      bottom: 5px !important;
      left: 16px !important;
      font-size: 12px !important;
    }
  }
}
</style>
<style lang="scss" scoped>
.el-date-quarter-container {
  display: flex;
  align-items: center;
}
</style>
